<template>
  <basic-container>
    <basic-header title="订单设置" />
    <el-form label-width="200px">
      <el-form-item label="订单自动确认时间:">
        <el-input @input="handleSetting" size="mini" type="text" class="litter" v-model="settingTime" />小时
        <span class="setting-sub">已送达订单经过多久后自动确认收货（修改时自动保存）</span>
      </el-form-item>
    </el-form>
  </basic-container>
</template>
<script>
import { SyncRequestSetting, PromiseSaveSetting } from "@/api/config";

export default {
  name: "order-setting",
  data() {
    return {
      settingTime: 0,
      timeout: {},
      saving: false,
      timeId: ""
    };
  },
  watch: {
    settingTime(v) {}
  },
  methods: {
    handleSetting() {
      let value = this.settingTime;
      if (value && !this.saving) {
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.saving = true;
          PromiseSaveSetting(value, this.timeId)
            .then(() => {
              this.saving = false;
            })
            .catch(error => {
              this.saving = false;
              this.$message({
                type: "error",
                message: error.message || String(error)
              });
            });
        }, 500);
      }
    }
  },
  async created() {
    const result = await SyncRequestSetting();
    if (result.error) {
      this.$message({
        type: "error",
        message: result.error.message || String(result.error)
      });
      return;
    }
    this.settingTime = result.data.data.bussData.orderAffirmTime;
    this.timeId = result.data.data.bussData.id;
  }
};
</script>

<style lang="scss" scoped>
.litter {
  width: 60px;
  text-align: center;
}
.setting-sub {
  color: #999;
  margin-left: 20px;
}
</style>
